{% extends "base.html" %}

{% block title %}
  {{contest.name}}
{% endblock %}

{% block body %}

<div class="subtitle">
  {{contest.start_time|DisplayDate}}{% if contest.creator %} by <span class="author">{{contest.creator}}{% endif %}</span>
</div>

<img src="/contestimage/{{contest.image.key.id}}" class="captionImage"/>
{% if contest.description %}
<div class="explanation">
  {{contest.description}}
</div>
{% endif %}

{% if contest.photo_credit %}
<div class="photoCredit">
  Photo credit: {{contest.photo_credit}}
</div>
{% endif %}

{% if active %}
<div class="createCaption">
  <button id="createCaption" contest_key="{{contest.key.id}}">Create Caption!</button>
  {% include "create.html" %}
</div>
{% endif %}

<div>
  <span class="submissionDeadline">
    {% if completed %}
    <b>Contest completed</b>
    {% else %}
    Contest ends {{contest.end_time|DisplayDate}}
    {% endif %}
  </span>
</div>

<div class="contestHeader">
  Contest submissions: {{numEntries}}
</div>

{% if numEntries != 0 %}
<div>
  <br/>
  Sort by &nbsp;
  {% if sortBy == 'recent' %}
  <a href="?sortBy=popular">popular</a> &nbsp; <b>recent</b>
  {% else %}
  <b>popular</b> &nbsp; <a href="?sortBy=recent">recent</a>
  {% endif %}
</div>
{% endif %}

{% for entry in entries %}
{% include "meme-entries.html" %}
{% endfor %}

{% if next or previous %}
  <div>
    {% if previous %}
    <a href="?sortBy={{sortBy}}&page={{page|add:-1}}">Previous page</a>
    {% endif %}
    {% if next %}
    <a href="?sortBy={{sortBy}}&page={{page|add:1}}">Next page</a>
    {% endif %}
  </div>
{% endif %}
{% endblock %}
